import {BasicColumn, FormSchema} from '/@/components/Table';
import {getAllRoleList} from "/@/api/system/role";
import {h} from 'vue';
import {Tag} from 'ant-design-vue';
import moment from 'moment';

export const columns: BasicColumn[] = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 60,
    },
    {
        title: '用户名',
        dataIndex: 'username',
        width: 150,
    },
    {
        title: '昵称',
        dataIndex: 'nickname',
        width: 150,
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        width: 180,
    },
    {
        title: '状态',
        dataIndex: 'status',
        width: 60,
        customRender: ({record}) => {
            const enable = record.status;
            const color = enable ? 'green' : 'red';
            const text = enable ? '启用' : '停用';
            return h(Tag, {color: color}, () => text);
        },
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        width: 180,
        format: (text: string) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
        title: '备注',
        dataIndex: 'remark',
    },
];

export const searchFormSchema: FormSchema[] = [
    {
        field: 'username',
        label: '用户名',
        component: 'Input',
        colProps: {xl: 8, lg: 12},
        componentProps: {
            placeholder: '请输入，支持模糊匹配'
        }
    },
    {
        field: 'nickname',
        label: '昵称',
        component: 'Input',
        colProps: {xl: 8, lg: 12},
    },
    {
        field: 'email',
        label: '邮箱',
        component: 'Input',
        colProps: {xl: 8, lg: 12},
    },
    {
        field: 'status',
        label: '状态',
        component: 'Select',
        colProps: {xl: 8, lg: 12},
        componentProps: {
            options: [
                {label: '启用', value: true},
                {label: '停用', value: false},
            ],
        },
    },
    {
        field: 'createTime',
        label: '创建时间',
        component: 'RangePicker',
        colProps: {xl: 8, lg: 12},
        componentProps: {
            allowClear: true,
            showTime: true
        }
    },

];

export const accountFormSchema: FormSchema[] = [
    {
        field: 'username',
        label: '用户名',
        component: 'Input',
        helpMessage: [
            '用户名长度为4至20位',
            '用户名不能以数字开头',
            '只能由大小写字母、数字组成',
        ],
        rules: [
            {min: 4, max: 20, message: '用户名长度为4至20位'},
            {pattern: /^\D/, message: '用户名不能以数字开头'},
            {pattern: /^[a-zA-Z\d]+$/, message: '只能由大小写字母、数字组成'},
        ],
        componentProps: {
            placeholder: '请填写用户名',
        },
    },
    {
        field: 'password',
        label: '密码',
        component: 'InputPassword',
        helpMessage: [
            '密码度为8至20位',
            '不能使用纯数字的密码',
        ],
        required: true,
        rules: [
            {required: true, message: '请输入密码',},
            {min: 8, max: 20, message: '密码长度为8至20位'},
            {pattern: /\D/, message: '不能使用纯数字的密码'},
        ],
        componentProps: {
            placeholder: '请填写密码',
        },
    },
    {
        field: 'status',
        label: '状态',
        component: 'Switch',
        helpMessage: [
            '点亮=启用，默认为启用状态',
        ],
        defaultValue: true,
        componentProps: {
            checkedChildren: '启用',
            unCheckedChildren: '停用',
        },
    },
    {
        field: 'roles',
        label: '角色',
        component: 'ApiSelect',
        helpMessage: [
            '支持多选！',
        ],
        componentProps: {
            mode: "multiple",
            api: getAllRoleList,
            labelField: 'roleName',
            valueField: 'roleValue',
        },
    },
    {
        field: 'nickname',
        label: '昵称',
        component: 'Input',
        rules: [
            {min: 2, max: 20, message: '昵称长度为2至20位'},
        ],
    },
    {
        field: 'email',
        label: '邮箱',
        component: 'Input',
    },
    {
        label: '备注',
        field: 'remark',
        component: 'InputTextArea',
    },
];

